(function () {
    const elevator = document.querySelector('.xtx-elevator');

    const toTop = document.querySelector('#backTop');

    //监听window滚动
    window.addEventListener('scroll', function () {
        //获取被卷去的尺寸
        const n = document.documentElement.scrollTop

        elevator.style.opacity = n >= 300 ? '1' : '0'
    })

    //给按钮添加点击事件，点击以后回到顶点
    toTop.addEventListener('click', function () {
        document.documentElement.scrollTop = 0
    })
})();

(function () {

    // 获取元素
    const elevator = document.querySelector('.xtx-elevator-list');
    const newGoods = document.querySelector('.xtx_goods_new');
    const popular = document.querySelector('.xtx_goods_popular');
    const brand = document.querySelector('.xtx_goods_brand');
    const topic = document.querySelector('.xtx_goods_topic');

    //事件委托
    elevator.addEventListener('click', function (e) {
        if (e.target.tagName === 'A' && e.target.dataset.name) {
            // console.log(e.target.dataset.name);
            const goodsName = e.target.dataset.name
            switch (goodsName) {
                case 'newGoods':
                    window.scrollTo(0, newGoods.offsetTop)
                    break
                case 'popular':
                    window.scrollTo(0, popular.offsetTop)
                    break
                case 'brand':
                    window.scrollTo(0, brand.offsetTop)
                    break
                case 'topic':
                    window.scrollTo(0, topic.offsetTop)
                    break 
            }
        }
    })

    window.addEventListener('scroll', function () {
        const n = document.documentElement.scrollTop

        elevator.querySelector('a.active') && elevator.querySelector('a.active').classList.remove('active')

        if (n >= newGoods.offsetTop && n < popular.offsetTop) {
            elevator.querySelector('a[data-name=newGoods]').classList.add('active')
        } else if (n >= popular.offsetTop && n < brand.offsetTop) {
            elevator.querySelector('a[data-name=popular]').classList.add('active')
        }
        else if (n >= brand.offsetTop && n < topic.offsetTop) {
            elevator.querySelector('a[data-name=brand]').classList.add('active')
        } else if (n >= topic.offsetTop) {
            elevator.querySelector('a[data-name=topic]').classList.add('active')
        }
    })
})();